refactor: adjust Columns multi-column breakpoint#229
Merged
brandonmcconnell merged 1 commit intomainfrom Apr 8, 2026
Merged
Conversation
Update the Columns component to apply its multi-column grid layout at the `@2xl` container width, ensuring the single-column layout is maintained for smaller container sizes.
pqoqubbw
approved these changes
Apr 8, 2026
brandonmcconnell
deleted the
brandon/adjust-container-query-breakpoint-for-columns
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adjusts the container query breakpoint for the
Columnscomponent, changing the@smbreakpoint to@2xlfor multi-column layouts. This ensures the multi-column behavior applies only on larger screen sizes, with smaller screens always rendering a single column.Test Plan
Visual testing in storybook
Note
Low Risk
Low risk styling-only change that affects layout responsiveness for the
Columnscomponent. Main risk is unexpected column behavior at intermediate container widths.Overview
Changes the
Columnsresponsive behavior by moving the container-query breakpoint for multi-column layout from@sm/columns-containerto@2xl/columns-container, while keeping@[0px]/columns-container:grid-cols-1to enforce a single column on smaller containers.This effectively delays when
colstakes effect in container-query contexts, making multi-column layouts appear only at larger container sizes.Reviewed by Cursor Bugbot for commit 046ef13. Bugbot is set up for automated code reviews on this repo. Configure here.